<template>
	<view class="shpop">
		<u-popup :show="show" round="24rpx" :closeable="true" :closeOnClickOverlay="false" @close="close">
			<view class="sqshpop">
				<block v-if="index === 0">
					<view class="title">申请售后</view>
					<view class="innerbox">
						<view class="typebox" @click="dlayed(1, 0, 0)">
							<text>售后类型：</text>
							<text v-if="FormData.type">{{ set_name(FormData.type) }}</text>
							<input v-else type="text" disabled v-model="FormData.type" placeholder="请选择" />
						</view>
						<view class="goodlist">
							<view class="item" v-for="(value, i) in info.products" :key="i">
								<image :src="value.image" mode=""></image>
								<view class="rbox">
									<text>{{ value.title }}</text>
									<text>{{ value.key_vals }}</text>
									<view class="row">
										<text>￥{{ value.price_sale }}</text>
										<text>X{{ value.num }}</text>
									</view>
								</view>
							</view>
						</view>
					</view>
					<footer-btn text="下一步" @submit="handleNext(1)"></footer-btn>
				</block>
				<block v-if="index === 1">
					<view class="title">{{ titleStrList[titleIndex] }}</view>
					<view class="container">
						<view class="typelist">
							<radio-group name="" @change="radChange($event, 'type')">
								<label class="item" v-for="(item, i) in typelist[titleIndex]" :key="i">
									<text>{{ item.name || item }}</text>
									<radio :checked="if_checked(item, keyList[titleIndex])" :value="item.val || item" />
								</label>
							</radio-group>
						</view>
					</view>
				</block>
				<block v-if="index === 2">
					<view class="title">确认退款信息</view>
					<view class="innerbox">
						<view class="typebox" style="height: 88rpx">
							<text style="font-size: 24rpx; font-weight: bold; color: #e54e4e">请与平台协商，确认达成一致后填写协商好的退款金额</text>
						</view>
						<view class="goodlist2">
							<view class="item" v-for="(value, i) in info.products" :key="i">
								<image :src="value.image" mode=""></image>
								<view class="rbox">
									<text>{{ value.title }}</text>
									<text>{{ value.key_vals }}</text>
									<view class="row">
										<text>￥{{ value.price_sale }}</text>
										<text>X{{ value.num }}</text>
									</view>
								</view>
							</view>
						</view>
						<view class="formbox">
							<view class="form-item" @click="dlayed(3, 2, 0)">
								<label>货物状态</label>
								<input v-model="FormData.delivery_status" disabled type="text" placeholder="请选择" />
								<image class="right" src="@/static/images/right.png" mode="aspectFit"></image>
							</view>
							<view class="form-item" @click="dlayed(1, 2, 1)">
								<label>退款原因</label>
								<input v-model="FormData.reason" disabled type="text" placeholder="请选择" />
								<image class="right" src="@/static/images/right.png" mode="aspectFit"></image>
							</view>
							<view class="form-item">
								<label>退款金额</label>
								<text>最多￥{{ max || '' }}</text>
								<input v-model="FormData.money" @input="input" :disabled="false" type="digit" placeholder="请输入" />
								<image class="edit" src="@/static/images/edit.png" mode="aspectFit"></image>
							</view>
							<view class="form-item" style="flex-direction: column; align-items: flex-start">
								<label>上传描述和凭证</label>
								<view class="content">
									<u--textarea v-model="FormData.remark" placeholder="补充描述，有助于商家更好的处理售后问题"></u--textarea>
									<view class="scimg">
										<u-upload width="202rpx" height="198rpx" :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple :maxCount="10">
											<view class="upimgbox">
												<image src="@/static/images/zu5550.png" mode="aspectFit"></image>
											</view>
										</u-upload>
									</view>
								</view>
							</view>
						</view>
					</view>
					<footer-btn
						showjiage
						:count="summation('num')"
						:zk="true"
						@clickjiage="clickjiage(true)"
						:jiage="FormData.money"
						text="提交申请"
						@submit="handleNext(2)"
					></footer-btn>
				</block>

				<block v-if="index === 3">
					<view class="title">货物状态</view>
					<view class="container">
						<view class="typelist">
							<radio-group name="" @change="radChange($event, 'delivery_status')">
								<label class="item" v-for="(item, i) in hwztlist" :key="i">
									<text>{{ item.title }}</text>
									<radio :checked="if_checked(item.title, 'delivery_status')" :value="item.title" />
								</label>
							</radio-group>
						</view>
					</view>
				</block>
			</view>
		</u-popup>
		<u-popup :show="jgmxpop" @close="jgmxpop = false" round="24rpx" :closeable="true" :closeOnClickOverlay="true">
			<view class="sqshpop sqshpop2">
				<view class="title">退款金额明细</view>
				<view class="innerbox">
					<view class="goodlist">
						<view class="item" v-for="(value, i) in info.products" :key="i">
							<image :src="value.image" mode=""></image>
							<view class="rbox">
								<text>{{ value.title }}</text>
								<text>{{ value.key_vals }}</text>
								<view class="row">
									<text>￥{{ value.price_sale }}</text>
									<text>X{{ value.num }}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
				<footer-btn
					showjiage
					:count="summation('num')"
					:zk="false"
					@clickjiage="clickjiage(false)"
					:jiage="FormData.money"
					text="提交申请"
					@submit="handleNext(2)"
				></footer-btn>
			</view>
		</u-popup>
	</view>
</template>

<script>
import { mapState } from 'vuex';

export default {
	name: 'shpop',
	props: {
		orderId: String | Number,
		show: {
			type: Boolean,
			default: false
		},
		info: {
			type: Object,
			default: () => {
				return {};
			}
		}
	},
	computed: {
		...mapState(['config']),
		summation() {
			return (key = 'num', i = 0) => {
				if (this.info.products.length > 0) {
					return this.info.products
						.reduce((total, current) => {
							return total + parseFloat(current[key]);
						}, 0)
						.toFixed(i);
				} else {
					return 0;
				}
			};
		},
		set_name() {
			return (data, flag = true) => {
				let list = this.typelist[0];
				try {
					if (flag) {
						return list.find((item) => item.val == data).name;
					} else {
						return list.find((item) => item.val == data);
					}
				} catch (e) {
					//TODO handle the exception
					return '';
				}
			};
		},
		if_checked() {
			return (item, key) => {
				if (this.FormData[key]) {
					if (item.hasOwnProperty('val')) {
						return this.FormData[key] == item.val;
					} else {
						return this.FormData[key] == item;
					}
				} else {
					return false;
				}
			};
		},
		max(){
			if(Object.keys(this.info).length>0){
				if(this.info.pay_info.weixin){
					return this.info.pay_info.weixin;
				}
				if(this.info.pay_info.yue){
					return this.info.pay_info.yue;
				}
			}else{
				return '0.00';
			}
			
		}
	},
	data() {
		return {
			titleStrList: ['选择售后类型', '退款原因'],
			keyList: ['type', 'reason'],
			titleIndex: 0,
			backIndex: 0,
			pzpop: false,
			jgmxpop: false,
			index: 2,
			typelist: [
				[
					{ name: '退款', val: '1' },
					// { name: '退货退款', val: '2' },
					// { name: '换货', val: '3' }
				],
				[]
			],
			hwztlist: [
				{
					title: '未收到货',
					val: 0
				},
				{
					title: '已收到货',
					val: 1
				}
			],
			FormData: {
				type: '1',
				delivery_status: '',
				reason: '',
				money: '',
				remark: ''
			},
			fileList1: []
		};
	},
	mounted() {
		this.$nextTick(() => {
			if(this.info.pay_info.weixin){
				this.$set(this.FormData, 'money', this.info.pay_info.weixin);
			}
			if(this.info.pay_info.yue){
				this.$set(this.FormData, 'money', this.info.pay_info.yue);
			}
			
		});
		this.$set(this.typelist, 1, this.config.qx_reason);
	},
	methods: {
		close(){
			if(this.index === 1){
				this.index = 2;
			}else if (this.index === 3){
				this.index = 2;
			}else{
				this.$emit('close');
			}
		},
		input(e) {
			let val = e.detail.value;
			if (this.info.pay_info.weixin >= parseFloat(val)) {
				this.$nextTick(() => {
					uni.$u.debounce(() => {
						this.FormData.money = parseFloat(val);
					}, 500);
				});
			} else {
				this.$nextTick(() => {
					uni.$u.debounce(() => {
						this.FormData.money = this.max;
					}, 500);
				});
			}
		},
		clickjiage(flag) {
			this.jgmxpop = flag;
		},
		handleNext(flag) {
			switch (flag) {
				case 1:
					if (!this.FormData.type) {
						this.msg('请选择售后类型');
						return;
					}
					this.index = 2;
					break;
				case 2:
					this.refund_add();
					break;
				// case 1:
				// 	this.index = 2;
				// 	break;
				default:
					break;
			}
		},
		refund_add() {
			if(!this.FormData.delivery_status){
				this.msg('请选择货物状态')
				return
			}
			if(!this.FormData.reason){
				this.msg('请选择退款原因')
				return
			}
			
			if(!this.FormData.money){
				this.msg('请输入退款金额')
				return
			}
			let uploadedfile1 = '';
			try {
				uploadedfile1 = this.fileList1.map((item) => item.url).join('|');
			} catch (e) {
				//TODO handle the exception
				uploadedfile1 = '';
			}

			let params = {
				...this.FormData,
				order_id: this.orderId,
				num: this.summation('num'),
				uploadedfile1
			};
			uni.showLoading({
				title: '加载中',
				mask: true
			});
			this.$http.getJson('refund1_add', params).then((res) => {
				uni.hideLoading();
				const { code, data, message } = res;
				if (code === 1) {
					this.msg(message, () => {
						this.toNav(`tksuccess/tksuccess?id=${this.orderId}`);
						// this.toBack();
					});
				} else {
					this.msg(message);
				}
			});
		},

		dlayed(nowIndex, backIndex = 0, titleIndex = 0, time = 200) {
			console.log(backIndex, titleIndex);
			this.titleIndex = titleIndex;
			this.backIndex = backIndex;
			setTimeout(() => (this.index = nowIndex), time);
		},

		radChange(e, key) {
			let val = e.detail.value;
			if (this.titleIndex === 1) {
				this.FormData[this.keyList[this.titleIndex]] = val;
			}else{
				this.FormData[key] = val;
			}
			setTimeout(() => (this.index = this.backIndex), 100);
		},
		deletePic(event) {
			this[`fileList${event.name}`].splice(event.index, 1);
		},
		// 新增图片
		async afterRead(event) {
			// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
			let lists = [].concat(event.file);
			let fileListLen = this[`fileList${event.name}`].length;
			lists.map((item) => {
				this[`fileList${event.name}`].push({
					...item,
					status: 'uploading',
					message: '上传中'
				});
			});
			for (let i = 0; i < lists.length; i++) {
				const result = await this.uploadFilePromise(lists[i].url);
				let item = this[`fileList${event.name}`][fileListLen];
				this[`fileList${event.name}`].splice(
					fileListLen,
					1,
					Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					})
				);
				fileListLen++;
			}
		},
		uploadFilePromise(file) {
			return new Promise((resolve, reject) => {
				let a = this.$http
					.getUpload(
						'index_ossupload',
						file,
						{
							if_touxiang: 0
						},
						'img'
					)
					.then((res) => {
						if (res.code == 1) {
							resolve(res.data);
						} else {
							this.msg(res.message);
						}
					});
			});
		}
	}
};
</script>

<style lang="less">
.sqshpop2 {
	position: relative;
	border: 1px solid #ccc;
}
.sqshpop {
	background: #f5f7f9;
	border-radius: 24rpx 24rpx 0 0;
	// max-height: calc(100vh);
	min-height: 800rpx;
	.scimg {
		margin-top: 34rpx;
		.upimgbox {
			image {
				width: 202rpx;
				height: 198rpx;
				border-radius: 16rpx;
				overflow: hidden;
			}
		}
	}
	.formbox {
		background: #fff;
		padding: 24rpx;
		.form-item {
			display: flex;
			align-items: center;
			min-height: 88rpx;
			.j-active();
			.content {
				padding: 10rpx 0;
				width: 100%;
				opacity: 1;
			}
			label {
				width: 200rpx;
				font-size: 28rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #000000;
			}
			text {
				font-size: 28rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #9695a3;
			}
			input {
				flex: 1;
				// .bor();
				font-size: 28rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #000000;
				text-align: right;
			}
			.edit {
				width: 24rpx;
				height: 24rpx;
				margin-left: 15rpx;
			}
			.right {
				width: 13rpx;
				height: 24rpx;
				margin-left: 24rpx;
			}
		}
	}
	.container {
		padding: 0 32rpx 16rpx;
	}
	.typelist {
		background: #ffffff;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		.item {
			display: flex;
			align-items: center;
			padding: 24rpx;
			text {
				flex: 1;
				font-size: 28rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #000000;
			}
		}
	}
	.title {
		font-size: 32rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #000000;
		text-align: center;
		padding: 24rpx 0 40rpx;
		height: 100rpx;
	}
	.innerbox {
		padding: 0 32rpx 16rpx;
		max-height: calc(100vh - 100rpx - 164rpx - 80rpx);
		min-height: 900rpx;
		overflow: auto;
		.goodlist {
			.item + .item {
				margin-top: 16rpx;
			}
			.item {
				display: flex;
				align-items: center;
				height: 224rpx;
				padding: 24rpx;
				background: #ffffff;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				& > image {
					width: 144rpx;
					height: 144rpx;
					background: #f8f8f8;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
				}
				.rbox {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					flex: 1;
					height: 144rpx;
					margin-left: 24rpx;
					& > text:nth-of-type(1) {
						font-size: 28rpx;
						font-family: PingFang SC-Bold, PingFang SC;
						font-weight: bold;
						color: #000000;
					}
					& > text:nth-of-type(2) {
						font-size: 20rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #999999;
					}

					.row {
						.flex-between();
						& > text:nth-of-type(1) {
							font-size: 28rpx;
							font-family: PingFang SC-Bold, PingFang SC;
							font-weight: bold;
							color: #000000;
						}
						& > text:nth-of-type(2) {
							font-size: 24rpx;
							font-family: PingFang SC-Bold, PingFang SC;
							font-weight: bold;
							color: #000000;
						}
					}
				}
			}
		}
		.goodlist2 {
			background: #ffffff;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			padding: 24rpx 24rpx 0rpx;
			.item + .item {
				border-top: 1px solid #f5f5f5;
			}
			.item {
				display: flex;
				align-items: center;
				height: 170rpx;
				// .bor();
				background: #ffffff;
				& > image {
					width: 144rpx;
					height: 144rpx;
					background: #f8f8f8;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
				}
				.rbox {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					flex: 1;
					height: 144rpx;
					margin-left: 24rpx;
					& > text:nth-of-type(1) {
						font-size: 28rpx;
						font-family: PingFang SC-Bold, PingFang SC;
						font-weight: bold;
						color: #000000;
					}
					& > text:nth-of-type(2) {
						font-size: 20rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #999999;
					}

					.row {
						.flex-between();
						& > text:nth-of-type(1) {
							font-size: 28rpx;
							font-family: PingFang SC-Bold, PingFang SC;
							font-weight: bold;
							color: #000000;
						}
						& > text:nth-of-type(2) {
							font-size: 24rpx;
							font-family: PingFang SC-Bold, PingFang SC;
							font-weight: bold;
							color: #000000;
						}
					}
				}
			}
		}
		.typebox {
			.flex-between();
			padding: 0 24rpx;
			height: 100rpx;
			margin-bottom: 16rpx;
			background: #ffffff;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			.j-active2();
			text:nth-of-type(1) {
				font-size: 32rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #000000;
			}
			input {
				text-align: right;
				font-size: 32rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #000000;
			}
			text:nth-of-type(2) {
				font-size: 32rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #000000;
			}
		}
	}
}
</style>
